<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./vue.min.js"></script>
    <div id="app">
        {{2 |fil}}
        <!-- <ul>
            <li v-for="item in list">
                {{item.sex===0?'男':'女'}}
            </li>
        </ul> -->

        <!-- 过滤器的使用方式 -->
        <ul>
            <li v-for="item in list">
                <!-- {{过滤的内容  |过滤的方法}} -->
                {{item.sex |filtersex}}
            </li>
        </ul>

        <ul>
            <li v-for="item in users">
                <!-- {{过滤的内容  |过滤的方法}} -->
                {{item.sex |filtersex|filtersq}}
            </li>
        </ul>
    </div>

    <div id="app2" >
        {{0 |fil }}
    </div>
    <script>
        //vue2中有 vue3（methods）
        //全局过滤
        //局部过滤
        Vue.filter("fil",(val)=>{
            return 111
        })
        new Vue({
            el:"#app2"
        })
        new Vue({
            el:"#app",
            data: {
                list: [
                    {
                        sex: 0
                    },
                    {
                        sex: 1
                    },
                    {
                        sex: 0
                    }
                ],
                users: [
                    {
                        sex: 1
                    },
                    {
                        sex: 1
                    },
                    {
                        sex: 0
                    }
                ]
            },
            //过滤器
            filters:{
                filtersex(val){
                    //参数val取决于|前面的东西
                    return val===0?'男':'女'
                },
                filtersq(val){
                    return val==='男'?'男孩':'萝莉'
                }
            },
        })
    </script>
</body>
</html>